<template>
  <div class="tree-div title-bg">
    <ul>
      <li v-for="item in treeData" :key="item.catId">
        <span
          v-if="!item.expanded && item.children_num > 0"
          class="expand-icon"
          @click="handleExpandClick(item)"
        >
          <CaretRightOutlined :style="{ fontSize: '12px' }" />
        </span>
        <span v-if="item.expanded" class="expand-icon" @click="handleExpandClick(item)">
          <CaretDownOutlined :style="{ fontSize: '12px' }" />
        </span>
        <span v-if="item.children_num == 0" style="margin-right: 18px"></span>
        <span class="name-span" @click="handleCategoryClick(item)">
          {{ item.name }}
        </span>
        <span class="line-span" v-if="item.sj_name_total" @click.stop="handleLineCountClick(item)">
          ( <b>{{ item.sj_name_total }}</b> |
        </span>
        <span class="sku-span" v-if="item.sku_count_total" @click.stop="handleSkuCountClick(item)">
          <b>{{ item.sku_count_total }}</b> |
        </span>
        <span
          class="count-span"
          v-if="item.order_count_total"
          @click.stop="handleCountsClick(item)"
        >
          <b>{{ item.order_count_total }}</b> )
        </span>

        <ul v-if="item.children && item.expanded">
          <TreeNode
            :key="tree_key"
            @expand="handleCategoryClick"
            @skuCountClick="handleSkuCountClick"
            @lineCountClick="handleLineCountClick"
            :treeData="item.children"
          />
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
  import { CaretRightOutlined, CaretDownOutlined } from '@ant-design/icons-vue'
  import { ref } from '@vue/runtime-core'

  export default {
    name: 'TreeNode',
    components: { CaretRightOutlined, CaretDownOutlined },
    props: {
      treeData: {
        type: Array,
        default: () => [],
      },
    },

    emits: ['expand', 'skuCountClick', 'lineCountClick'],
    setup() {
      const tree_key = Math.random(20000, 60000)
      const test = ref(false)
      return {
        tree_key,
        test,
      }
    },
    methods: {
      handleExpandClick(category) {
        this.$emit('expand', category)
      },
      handleCategoryClick(category) {
        if (category.children_num > 0) {
          this.$emit('expand', category)
        }
      },
      handleSkuCountClick(item) {
        this.$emit('skuCountClick', item)
      },
      handleCountsClick(item) {
        this.$emit('skuCountClick', item)
      },
      handleLineCountClick(item) {
        this.$emit('lineCountClick', item)
      },
    },
  }
</script>

<style scoped>
  .tree-div {
    padding: 0 8px;
    margin: 0 6px;
  }

  .expand-icon {
    margin-right: 6px;
    cursor: pointer;
  }

  .tree-div li {
    white-space: nowrap;
    margin-bottom: 5px;
  }

  .sku-span {
    color: #2db7f5;
    cursor: pointer;
  }

  .count-span {
    color: #f50;
    cursor: pointer;
  }

  .line-span {
    color: #752fea;
    cursor: pointer;
  }

  .name-span {
    cursor: pointer;
  }
</style>
